<template>
	<uni-popup ref="imgPopRef" type="center" @change="handleChange">
		<view class="flex justify-center items-center rounded-md overflow-hidden" @touchstart="handleTouchStart"
			@touchmove="handleTouchMove" @touchend="handleTouchEnd">
			<image :src="props.url" :style="{ width: imageWidth + 'px', height: 'auto' }" mode="widthFix"></image>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue';
	const props = defineProps({
		modelValue: {
			type: Boolean,
			default: false
		},
		url: {
			type: String,
			default: ''
		}
	})
	const emit = defineEmits(['update:modelValue'])
	const imgPopRef = ref(null)
	const startDistance = ref(0)
	const scale = ref(1)
	const imageWidth = ref(300)

	watch(() => props.modelValue, () => {
		if (props.modelValue) {
			imgPopRef.value.open()
		} else {
			imgPopRef.value && imgPopRef.value.close()
		}
	}, {
		deep: true,
		immediate: true
	})
	const handleChange = (e) => {
		emit('update:modelValue', e.show)
	}
	const handleTouchStart = (event) => {
		console.log(event)
		if (event.touches.length === 2) { // 确保是两个手指触摸开始
			const touch0 = event.touches[0];
			const touch1 = event.touches[1];
			const X = touch0.pageX - touch1.pageX; // X坐标之差
			const Y = touch0.pageY - touch1.pageY; // Y坐标之差
			startDistance.value = Math.sqrt(X * X + Y * Y); // 计算初始距离的平方根（勾股定理）
		}
	}

	const handleTouchMove = (event) => {
		if (event.touches.length === 2) { // 确保是两个手指触摸移动中
			const touch0 = event.touches[0];
			const touch1 = event.touches[1];
			const X = touch0.pageX - touch1.pageX; // X坐标之差
			const Y = touch0.pageY - touch1.pageY; // Y坐标之差
			const distance = Math.sqrt(X * X + Y * Y); // 计算当前距离的平方根（勾股定理）
			const scale = distance / startDistance.value; // 计算缩放比例（当前距离 / 初始距离）
			scale.value = scale; // 更新缩放比例
			imageWidth.value = scale.value * 300; // 根据缩放比例调整图片宽度，300为初始宽度，可以根据需要调整或使用动态值
		}
	}

	const handleTouchEnd = () => {}
</script>

<style lang="scss" scoped>
</style>